// Tailwind CSS 核心功能内联
const tailwind = (
    function () {
    const tw = {
        config: {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366F1',
                        secondary: '#EC4899',
                        accent: '#8B5CF6',
                        background: '#F8FAFC',
                        board: '#E0F2FE',
                        tile1: '#FCA5A5',
                        tile2: '#FDBA74',
                        tile3: '#A7F3D0',
                        tile4: '#93C5FD',
                        tile5: '#C4B5FD',
                        tile6: '#F9A8D4'
                    },
                    fontFamily: {
                        game: ['Arial', 'sans-serif']
                    }
                }
            }
        },
        utilities: {
            'content-auto': 'content-visibility: auto;',
            'game-shadow': 'box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);',
            'tile-hover': 'transform: scale(1.05); box-shadow: 0 0 15px rgba(99, 102, 241, 0.7);',
            'score-pop': 'animation: scorePop 0.5s ease-out forwards;',
            'tile-fall': 'animation: tileFall 0.3s ease-out forwards;',
            'tile-disappear': 'animation: tileDisappear 0.3s ease-out forwards;',
            'shake': 'animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;'
        },
        animations: {// 定义动画
            // 分数弹出动画
            'scorePop': [
                '0% { transform: scale(1); opacity: 1; }',
                '50% { transform: scale(1.5); opacity: 0.8; }',
                '100% { transform: scale(1); opacity: 1; }'
            ],
            // 瓷砖掉落动画
            'tileFall': [
                'from { transform: translateY(-100%); opacity: 0; }',
                'to { transform: translateY(0); opacity: 1; }'
            ],
            // 瓷砖消失动画
            'tileDisappear': [
                'from { transform: scale(1); opacity: 1; }',
                'to { transform: scale(0); opacity: 0; }'
            ],
            // 瓷砖摇晃动画
            'shake': [
                '10%, 90% { transform: translate3d(-1px, 0, 0); }',
                '20%, 80% { transform: translate3d(2px, 0, 0); }',
                '30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }',
                '40%, 60% { transform: translate3d(4px, 0, 0); }'
            ]
        },
        applyClasses: function (element, classes) {
            if (!classes) return;

            classes.split(' ').forEach(cls => {
                if (tw.utilities[cls]) {
                    element.style.cssText += tw.utilities[cls];
                } else if (cls.startsWith('text-')) {
                    const color = cls.replace('text-', '');
                    if (tw.config.theme.extend.colors[color]) {
                        element.style.color = tw.config.theme.extend.colors[color];
                    }
                } else if (cls.startsWith('bg-')) {
                    const color = cls.replace('bg-', '');
                    if (tw.config.theme.extend.colors[color]) {
                        element.style.backgroundColor = tw.config.theme.extend.colors[color];
                    }
                } else if (cls.startsWith('rounded-')) {
                    if (cls === 'rounded-lg') {
                        element.style.borderRadius = '0.5rem';
                    } else if (cls === 'rounded-xl') {
                        element.style.borderRadius = '0.75rem';
                    } else if (cls === 'rounded-2xl') {
                        element.style.borderRadius = '1rem';
                    }
                }
            });
        }
    };

    const style = document.createElement('style');
    let animationCSS = '';
    for (const [name, keyframes] of Object.entries(tw.animations)) {
        animationCSS += `@keyframes ${name} { ${keyframes.join(' ')} }`;
    }
    style.textContent = animationCSS;
    document.head.appendChild(style);

    return tw;
})();